<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :class="{'global-mobile-dialog':showMobilePage}"
    class="subcribe-common-dialog small-common-dialog-size dialog-container"
  >
    <Title title="选择同步账号" font-size="16px" style="margin-bottom:20px;"/>
    <el-form
      ref="accountSyncForm"
      :model="accountData"
      :rules="rules"
      :label-position="showMobilePage?'left':'right'"
      label-width="68px"
      class="lineHeight32 mb0">
      <el-form-item label="账号" prop="account">
        <selectWithoutHttp
          v-model="accountData.account"
          :list-data="accountList"
          value-type="object"
          key-name="id"
          label-name="label"
          class="width240"
          @change="handleChange"/>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button :disabled="!accountData.account || selectData.isExpired" class="ok" type="primary" @click="handleConfirm">同步信息</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { syncResource } from '@/api/signUp';
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
import { isIphone } from '@/utils/tools';

export default {
  name: 'BPStoreDialog',
  components: {
    Title,
    selectWithoutHttp
  },
  props: {
    processId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false,
      signUpId: '',
      accountList: [],
      accountData: {
        account: null
      },
      selectData: {
        id: null,
        label: '',
        isExpired: false
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    rules() {
      return {
        'account': [{ required: true, message: '请选择账号', trigger: 'change' }]
      };
    }
  },
  methods: {
    init(id, list) {
      this.signUpId = id;
      this.accountList = list;
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.$refs['accountSyncForm'].resetFields();
      this.dialogVisible = false;
    },
    handleChange(data) {
      this.selectData = data;
    },
    handleConfirm() {
      this.$refs['accountSyncForm'].validate(valid => {
        if (valid) {
          const { id } = this.accountData.account;
          if (!id) {
            this.$message.error('无法获取id');
            return;
          }
          syncResource(id).then(res => {
            if (res.code === 200) {
              const { isExists, accountId } = res.data;
              const query = {
                fromSignUp: 1,
                signUpId: this.signUpId,
                accountId: id
              };
              if (this.processId)query.processId = this.processId;
              if (isExists) {
                // 已存在同步账号不需要判断是否有资源编辑权限
                if (isIphone) {
                  this.$router.push({
                    name: 'editResource',
                    params: { resourceId: accountId },
                    query
                  });
                } else {
                  const routeUrl = this.$router.resolve({
                    name: 'editResource',
                    params: { resourceId: accountId },
                    query
                  });
                  window.open(routeUrl.href, '_blank');
                }
              } else {
                if (!hasRouteAuth('medium:operator:resourceAdd')) {
                  this.$message.warning('您暂无账号新建权限，请联系管理员添加~');
                  return;
                }
                if (isIphone) {
                  this.$router.push({
                    name: 'createResource',
                    query
                  });
                } else {
                  const routeUrl = this.$router.resolve({
                    name: 'createResource',
                    query
                  });
                  window.open(routeUrl.href, '_blank');
                }
              }
              this.handleDialogClose();
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  ::v-deep {
    .el-select {
      width: 240px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
</style>
